<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*"> 
		<title>查询角色</title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
		<link rel="stylesheet" href="js/themes/default/easyui.css"/>
		<script src="js/lib/jquery-1.11.0.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/vue-resource.js"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<style>
		body{
			font-size:12px;
		}
		table,
		th,
		td {
			border: 1px solid grey;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		table td:nth-child(odd) {
			background-color: #f1f1f1;
			width:160px;
		}
		table td:nth-child(even) {
			width:160px;
		}
		table tr:nth-child(even) {
			background-color:#ffffff;
		}
		input{
			width:280px;
		}
		span{
			width:20px;color:red;display:inline-block;text-align:center;
		}
		#sho{
			width:300px;
			height:50px;
			background:#d9534f;
			opacity:0.8;
			border-radius:8px;
			color:#fff;
			text-align: center;
			font-size:30px;
			position: absolute;
			top:0px;
			left:550px;
			display:none;
		}
		</style>
	</head>
	<body>
		<div class="" id="box">
			<div id="sho"></div>
		<!--查询权限-->
		<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="8">角色权限查询:</th>
					</tr>
					<tr>
						<td>
							角色名称：
						</td>
						<td colspan="7">
							<input id="p1" type="text" class="form-control" style="width:280px"/>
						</td>
					</tr>
					<tr>
						<td>
							角色标识：
						</td>
						<td colspan="7">
							<input id="p2" type="text" class="form-control" style="width:280px"/>
						</td>
					</tr>
					<tr>
						<td colspan="8">
							<a href="新增角色管理.html" class="btn btn-danger" style="font-size:15px;float:left;width:54px;">
								+
							</a>
							<button v-on:click="add()" class="btn btn-danger" style="display:block;margin:0 auto">查询</button>
						</td>					
					</tr>
					<tr class="text-center">
						<td>序号</td>
						<td>ID</td>
						<td>角色名称</td>
						<td>角色标识</td>
						<td>状态</td>
						<td>日期</td>
						<td>操作</td>
					</tr>
					<tr v-for="(li,index) in list" class="text-center">
						<td>{{index+1}}</td>
						<td>{{li.id}}</td>
						<td>{{li.rolename}}</td>
						<td>{{li.rolecode}}</td>
						<td>{{li.status | modify0:li.status}}</td>
						<td>{{li.createTime}}</td>
						<td><a v-on:click="baocun()" href="修改角色管理.html">修改</a><a v-on:click="del()" href="删除角色管理.html">删除</a></td>
					</tr>
				</tbody>
			</table>		
		</div>	
		</div>		
	</body>
	<script>
		$(function(){
			/*自定义过滤器   1*/
		Vue.filter('modify0',function(){
			return function(input,param){
				if(param == 0){
					return param = "可用"
				}
				if(param == 1){
					return param = "废弃"
				}
			}
		})
	new Vue({
				el:"#box",
				data:{
					list:[],					
				},
				methods:{
					/*查询管理权限*/
					add:function(){
						var p1 = $('#p1').val();
						var p2 = $("#p2").val();
						var p3 = $('#p3').val();						
						this.$http.post(window.baseUrl+"user/role/find",{
rolename:p1,rolecode:p2,size:1000							
						},{emulateJSON:true}).then(
								   function (res) { 
								    console.log(res.data.content)
								   this.list = res.data.content
								   console.log(this.list)
								    $('#sho').stop().show().text("查询数据成功")
								    $('#sho').stop().fadeOut(2500).text("查询数据成功")
								    $('#p1').val("");
						            $("#p2").val("");
						            $('#p3').val("");
								   },function (res) { 
								   	alert("查询数据失败！")
								   	$('#p1').val("");
						            $("#p2").val("");
						            $('#p3').val("");
								   } 
								  );
					},
				}
			})
		})
	</script>
</html>

